<script lang="ts" setup>
  import { onMounted, ref, watch } from 'vue';
  import { data } from './citys';

  onMounted(() => {
    search();
  });

  let provinces = ref<Array<any>>([]);

  let citys = ref<Array<any>>([]);
  let districts = ref<Array<any>>([]);
  const province = ref('北京市'),
    city = ref(),
    district = ref();
  const search = async () => {
    provinces.value = [];
    data.forEach((Element) => {
      // console.log(Element);

      provinces.value.push({
        label: Element.fullname,
        value: Element.fullname,
        abc: Element.children,
      });
      // console.log(provinces);
    });
    citys.value = [];
    provinces.value.forEach((element) => {
      // console.log(element);
      if (province.value == element.value) {
        // console.log(element.abc);
        element.abc.forEach((v) => {
          citys.value.push({ label: v.fullname, value: v.fullname, def: v.children });
        });
      }
    });
    districts.value = [];
    citys.value.forEach((element) => {
      // console.log(element);
      if (city.value == element.value) {
        // console.log(element);
        element.def.forEach((v) => {
          districts.value.push({ label: v.fullname, value: v.fullname });
        });
      }
    });
    // console.log(provinces);
  };

  watch(province, () => {
    search();
  });
  watch(city, () => {
    search();
  });
  // watch(district, () => {
  //   search();
  // });
</script>

<template>
  <div class="flex">
    <NSelect class="flex-1" v-model:value="province" :options="provinces" />
    <NSelect class="flex-1" v-model:value="city" :options="citys" />
    <NSelect class="flex-1" v-model:value="district" :options="districts" />
  </div>
</template>
